<template>
  <div class="basic-switch-button">
    <div
      v-for="item in options"
      :key="item.value"
      class="button"
      :class="{ button__active: item.value === modelValue }"
      @click="handleClick(item.value)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script setup lang="ts">
interface IEmit {
  (event: 'update:modelValue', value: number | string): void
  (event: 'change', value: number | string): void
}

interface IProps {
  modelValue: number | string | undefined
  options: LabelValue<number | string>[]
}

const emit = defineEmits<IEmit>()
defineProps<IProps>()

function handleClick(val: number | string) {
  emit('update:modelValue', val)
  emit('change', val)
}
</script>

<style scoped lang="scss">
.basic-switch-button {
  @apply inline-flex h-[32px] p-1 bg-[#F7F8FA] rounded-[4px] relative;

  .button {
    @apply flex items-center h-full px-[16px] py-[4px] cursor-pointer  text-[14px]  relative;

    &__active {
      @apply cursor-default bg-white text-primary font-semibold rounded-[4px] z-[1];

      box-shadow: 0 0 6px rgba(22, 76, 255, 0.2);
    }
  }
}
</style>
